<template>
  <div class="goods" ref="listwrapper">
    <div class="sHeader" :class="{fixedBar:isFixed2}">
      <div class="item">1</div>
      <div class="item">2</div>
    </div>
    商品列表
    <!-- <div class="shop" v-for="(shop, index) in shops" :key="index">
      <p>{{shop.restaurant.name}}</p>
      <p>{{shop.restaurant.address}}</p>
      <img :src="shop.restaurant.image_path" alt="">
    </div> -->


    <div class="good-list">
      <router-link tag='div' :to='"/Shop/" + shop.id' class="shop" v-for="shop in shops" :key="shop.id">
          <p>{{shop.name}}</p>
          <p>{{shop.address}}</p>
          <img :src="shop.image_path" alt="">
      </router-link>
      <!-- <div class="shop" v-for="(shop, index) in shops" :key="index">
        <p>{{shop.name}}</p>
        <p>{{shop.address}}</p>
        <img :src="shop.image_path" alt="">
      </div> -->
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import BScroll from 'better-scroll'
export default {
  props: {
    'isFixed2': Boolean
  },
  data() {
    return {
      shops: [],
      scroll: null
    }
  },
  created() {
    // this.getSS()
    this.getShops()
  },
  mounted() {
    // this.getShops()
    // let url = 'https://www.ele.me/place/ww0tztzjg2jw?latitude=34.793316&longitude=113.542475'
    // jsonp(url, null, (err, data) => {
    //   if (err) {
    //     console.log(err)
    //   } else {
    //     console.log(data)
    //   }
    // })
  },
  methods: {
    getSS () {
      let urlString = 'http://192.168.0.59:10002/api/v2/shops/'
      axios.get(urlString).then(res => {
        console.log(res)
        
      }).catch(err => {
        console.log(err)
        
      })
    },
    getShops() {
      // let url = 'https://www.ele.me/place/ww0tztzjg2jw?latitude=34.793316&longitude=113.542475'
      // let urlString = 'http://localhost:100001/api/v2/shops/'  // /api/shops.json
      let urlString = 'http://192.168.0.59:8080/api/v2/shops/'
      axios.get(urlString).then(res => {
        // console.log(res);
        res.data.forEach(element => {
          let reg = RegExp(/png/)
          let suffix = 'jpeg'
          if (reg.test(element.image_path)) {
            suffix = 'png'
          }
          let imgpath = `${element.image_path.slice(0,1)}/${element.image_path.slice(1,3)}/${element.image_path.slice(3)}`
          // console.log(imgpath);
          element.image_path = `https://fuss10.elemecdn.com/${imgpath}.${suffix}%3FimageMogr2/thumbnail/130x130/format/webp/quality/85`
        })
        this.shops = res.data
        // res.data.forEach(element => {
        //   console.log(element.image_path);
        // })

        this.$nextTick(() => {
          // this.scroll = new BScroll(this.$refs.list-wrapper)
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.listwrapper,{
              click: true,
              scrollY: true,
              pullUpLoad: {
                threshold: -20 // 当上拉距离超过30px时触发 pullingUp 事件
              }
            })
            console.log(this.scroll)
            
            this.scroll.on('pullingUp',() => {
              // 下拉动作
              console.log('下拉')
              this.scroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
            })
          }
        })

      }).catch(error => {
        console.log(error);
      })
    },
    getShops2() {
      // let url = 'https://www.ele.me/place/ww0tztzjg2jw?latitude=34.793316&longitude=113.542475'
      axios.get('/api/shops3.json').then(res => {

        res.data.items.forEach(ele => {
          let element = ele.restaurant
          let reg = RegExp(/png/)
          let suffix = 'jpeg'
          if (reg.test(element.image_path)) {
            suffix = 'png'
          }
          let imgpath = `${element.image_path.slice(0,1)}/${element.image_path.slice(1,3)}/${element.image_path.slice(3)}`
          // console.log(imgpath);
          element.image_path = `http://fuss10.elemecdn.com/${imgpath}.${suffix}?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/`
        })
        this.shops = res.data.items
        // res.data.items.forEach(element => {
        //   console.log(element.restaurant.image_path);
        // })
      }).catch(error => {
        console.log(error);
      })
    }
  }
  // https://fuss10.elemecdn.com/6/2b/505a27006ebad0b1a06dc25ecd61epng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/
  // https://fuss10.elemecdn.com/3/d5/d1201ec50b104e8d6b2d1e906c400jpeg.jpeg%3FimageMogr2/thumbnail/140x140/format/webp/quality/85
  // https://fuss10.elemecdn.com/3/d5/3d5d1201ec50b104e8d6b2d1e906c400jpeg.jpeg%3FimageMogr2/thumbnail/140x140/format/webp/quality/85
  // https://fuss10.elemecdn.com/3/d5/3bcbf339c897fbf5107c6baae885e061jpeg.jpeg%3FimageMogr2/thumbnail/140x140/format/webp/quality/85
}
</script>
<style lang="stylus" scoped>
  .goods
    // overflow hidden
    position relative
    .good-list
      position absolute
      top 20vw
      left 0
      width 100%
  .sHeader
    height 10vw
    background-color green
    color #fff
    text-align center
    line-height 10vw
    width 100%
    display flex
    .item
      width 50%
      height 0
      padding-bottom 10vw
  .fixedBar
    position fixed
    top 10vw
    right 0
    z-index 1000
    width 100%
</style>
